import { useState,useReducer } from "react";
import Button from '@mui/material/Button';
import { useLocation  } from "react-router-dom";

const products = [
  { title: "Cabbage", isFruit: false, id: 1 },
  { title: "Garlic", isFruit: false, id: 2 },
  { title: "Apple", isFruit: true, id: 3 },
];

let  _index = 0;

function addTest (name:string){
  return '你添加了:'+name;
}

const mainname ='成大海';

const Demo = () => {
  const [items, setItems] = useState(products);

  const [tasks, dispatch] = useReducer(addTest, mainname);



  const location = useLocation();

  const updateItem = (id: number, newValue: boolean) => {
    setItems(
      items.map((item) =>
        item.id === id ? { ...item, isFruit: newValue } : { ...item, isFruit: false }
      )
    );
  };

  function handleChangeTask(taskname:string) {
    console.log(taskname);
    dispatch();
  }

  setTimeout(()=>{
    _index++;
  },4000);

  return (
    <div>
      <div>{tasks}</div> <button onClick={()=>handleChangeTask('sdsds')}>添加</button>
      <div>{_index}</div>
       <p>You are at: {location.pathname}</p>
      <ul>
        {items.map((item) => (
          <li
            key={item.id}
            style={{
              color: item.isFruit ? "magenta" : "darkgreen",
            }}
          >
            {item.title}
            <Button variant="contained" onClick={() => updateItem(item.id, true)}>修改</Button>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default Demo;
